<template>
  <div class="wrapper">
    <transition-group tag="ul" :name="direction" class="carousel">
      <li
        v-for="(item, index) in imgs"
        v-show="curIndex == index + 1"
        :key="index + 1"
      >
        <img :src="item+'?imageView=1&type=webp&thumbnail=253x0'" />
      </li>
    </transition-group>
    <ul class="dot">
      <!-- <li
        v-for="i in 5"
        @click="$emit('', 'i')"
        :class="{ active: curIndex == i }"
      ></li> -->
    </ul>
    <button @click="$emit(prev)" class="prev">prev</button>
    <button @click="$emit(next)" class="next">next</button>
  </div>
</template>

<script>
export default {
  name: "Swipe",
  data() {
    return {
        imgs:[],
      // getter/setter 响应式数据
      istrans: true,
    };
  },
  created(){
      this.banners();
  },
  methods: {
      banners(){
          this.$http.get("/banner?type=1").then(data=>{
              console.log(data);
          })
      },
    prev() {
      this.$children[0].direction = "slideright";
      this.istrans = true;
      this.$children[0].curIndex--;
      if (this.$children[0].curIndex <= 0) {
        this.istrans = false;
        this.$children[0].curIndex = 5;
      }
    },
    next() {
      this.istrans = true;
      this.$children[0].curIndex++;
      if (this.$children[0].curIndex > 5) {
        this.istrans = false;
        this.$children[0].curIndex = 1;
      }
    },

    change(i) {
      // if(this.curIndex>)
      this.curIndex = i;
      console.log(this.curIndex);
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0px;
  padding: 0px;
}

ul {
  list-style: none;
}

.wrapper {
  width: 750px;
  height: 310px;
  /* border:5px solid #f00; */
  margin: 0 auto;
  position: relative;
}

.carousel {
  /* transform translateX参照是自身 */
  position: relative;
}

.carousel li {
  position: absolute;
  left: 0px;
  top: 0px;
}

.dot {
  width: 20%;
  position: absolute;
  right: 50px;
  bottom: 20px;
}

.dot > li {
  width: 20px;
  height: 20px;
  position: static;
  background-color: coral;
  border-radius: 50%;
  float: left;
  margin-right: 10px;
}

.dot > li.active {
  background-color: crimson;
}

.slideright-enter {
  transform: translateX(-100%);
}

.slideright-enter-to {
  transform: translateX(0%);
}

.slideright-enter-active {
  transition: all 1s linear;
}

.slideright-leave {
  transform: translateX(0%);
}

.slideright-leave-to {
  transform: translateX(100%);
}

.slideright-leave-active {
  transition: all 1s linear;
}

/* 左 */
.slideleft-enter {
  transform: translateX(100%);
}

.slideleft-enter-to {
  transform: translateX(0%);
}

.slideleft-enter-active {
  transition: all 1s linear;
}

.slideleft-leave {
  transform: translateX(0%);
}

.slideleft-leave-to {
  transform: translateX(-100%);
}

.slideleft-leave-active {
  transition: all 1s linear;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  border: none;
  padding: 5px;
}

.prev {
  left: 0px;
}

.next {
  right: 0px;
}
</style>